// 收徒详情
import React, { Component } from 'react'
import { View, Text, TouchableOpacity, Image } from 'react-native'
import HeaderWhite from '../../../components/header/headerWhite'
import { Container, Content } from 'native-base'
import commonStyle from '../../../libs/commonStyle'
import TableHead from '../../../components/tableHead/index'
import { statList, tableHeadList, addStatToList } from './data'
import { format } from '../../../libs/date'
import { connect } from 'react-redux' // 引入connect函数
import * as recruitAction from '../../../redux/actions/recruit'

class RecruitDetail extends Component {
	constructor(props) {
		super(props)
		this.state = {
			headList: tableHeadList
		}
	}

	componentDidMount() {
		this.props.recruit && this.props.recruit()
	}

	render() {
		const { headList } = this.state
		const { recruitList, stat } = this.props
		const list = addStatToList(statList, stat)
		return (
			<Container>
				<HeaderWhite title="我的徒弟" hasLeft />
				<Content>
					<View
						style={[
							commonStyle.flexRow,
							commonStyle.flexCenter,
							commonStyle.border,
							commonStyle.ml20,
							commonStyle.mr20,
							commonStyle.mt30,
							commonStyle.shadowGray,
							commonStyle.circle10
						]}
					>
						{list.map((item, index) => {
							return (
								<View
									style={[
										commonStyle.p40,
										commonStyle.flexCenter,
										commonStyle.flexItem,
										index - 1 !== statList.length
											? commonStyle.borderRight
											: ''
									]}
								>
									<Text style={{ color: '#333' }}>
										{item.title}
									</Text>
									<Text
										style={[
											commonStyle.mt20,
											commonStyle.colorGray
										]}
									>
										<Text
											style={[
												commonStyle.h3,
												commonStyle.f50
											]}
										>
											{item.subTitle}
										</Text>
										人
									</Text>
								</View>
							)
						})}
					</View>
					<View style={[commonStyle.mb30]}>
						<Text
							style={[
								commonStyle.colorRed,
								commonStyle.textRight,
								commonStyle.mr20,
								commonStyle.mt10
							]}
						>
							*有效徒弟是指成功提现的徒弟
						</Text>
					</View>

					<View
						style={[
							commonStyle.ml20,
							commonStyle.mr20,
							commonStyle.mt40
						]}
					>
						<TableHead list={headList} />
						{recruitList.map((item, index) => {
							return (
								<View
									style={[
										commonStyle.flexRow,
										commonStyle.p20,
										commonStyle.flexVerticalCenter,
										commonStyle.borderBottom
									]}
								>
									<View style={[commonStyle.flexCenter, {flex: headList[0].flex}]}>
										<Text style={[commonStyle.f22]}>
											{item.createTime}
										</Text>
									</View>
									<View style={[commonStyle.flexCenter, { flex: headList[1].flex }]}>
										<Image
											style={[
												commonStyle.w50,
												commonStyle.h50,
												commonStyle.circle30
											]}
											source={{
												uri: item.headimgurl
											}}
										/>
										<Text style={[commonStyle.f22]}>
											{item.id} / {item.nickName}
										</Text>
									</View>

									<View style={[commonStyle.flexCenter, { flex: headList[2].flex }]}>
										<Text style={[commonStyle.f22]}>
											{ item.start }
										</Text>
									</View>
								</View>
							)
						})}
					</View>
				</Content>
			</Container>
		)
	}
}

export default connect(
	state => ({
		user: state.login.user,
		stat: state.recruit.stat,
		recruitList: state.recruit.list || []
	}),
	dispatch => ({
		recruit: () => dispatch(recruitAction.recruit())
	})
)(RecruitDetail)
